// RouterProvider,路由提供器
// createHashRouter创建哈希路由
import {RouterProvider,createBrowserRouter}  from  'react-router-dom'
import Root from '../views/Root'
import LoginView from '../views/LoginView'
import NoMatch from '../views/NoMatch'
import ProduceView from '../views/ProduceView'
// import UserView from '../views/UserView'
import Private from '../views/Private'
import { lazy, Suspense, useEffect, useState,createElement } from 'react'
// import { useDispatch,useSelector} from 'react-redux'
// import { getRouteList} from '../store/counterSlice'
import {GetRouteList} from '../api/index'
import Admin from '../views/Admin.jsx'
// import axios from 'axios';
const UserView = lazy(()=>import("../views/UserView.jsx"));

const baseRoutes=[
  {path:"/",element:<Root/>,
  children:[
    {path:"login",element:<LoginView/>},
    {path:"admin",element:<Private><Admin/></Private>},
    {path:"produce/:id",element:<ProduceView/>},
    {path:"user",element:<Suspense><UserView/></Suspense>},
    {path:"",element:<LoginView/>},
    {path:"*",element:<NoMatch/>}
  ]
},
  {path:"/about",element:<div>关于</div>},
];
 
export default function RouterView(){
  // 创建路由
  const [router,setRouter] = useState(createBrowserRouter(baseRoutes))
  useEffect(()=>{
    // 获取路由列表
    GetRouteList()
    .then(res=>{
      var routeList = res.data.route;
      // 遍历更新
      baseRoutes[0].children[1].children=routeList.map(item=>{
        return {path:item.path,element:<Suspense>{createElement(lazy(()=>import('../views'+item.component+".jsx")))}</Suspense>}
      });
      setRouter(createBrowserRouter(baseRoutes))
    }) 
  },[])
  // 路由列表发生变化时候
 
  
  return <RouterProvider router={router}></RouterProvider>

}

// router/index.jsx
// npm i react-router-dom
// #/about   /
// ppt 项目成员介绍 ,项目介绍,项目模块与功能介绍,技术构成与要点,项目的需要改进部分,项目收获,致谢
// 1组 27日合并完毕,28日ppt